<docs>
  ## select 组件
</docs>
<template>
  <div
    :class="`weui-cell weui-cell_select weui-cell_select-after
    ${valid === status.REJECTED ? 'weui-cell_warn' : ''}`"
  >
    <div class="weui-cell__hd">
      <label class="weui-label">{{label}}</label>
    </div>
    <div class="weui-cell__bd">
      <div :id="prop" class="txt">{{ placeName || '请选择'}}</div>
    </div>
  </div>
</template>
<script>
import { mixinValid } from "common/mixins/mixins";
import PickerExtend from "picker-extend"; //行政区划插件

export default {
  name: "select-json",
  props: {
    label: String,
    prop: String,
    value: String,
    url: {
      type: String,
      default: "1"
    },
    checkSelect: {
      type:Boolean,
      default: false
    },
    placeName: String
  },
  data() {
    return {
      positionArr: []
    };
  },
  mounted() {
    this.get_xzqh();
  },
  methods: {
    get_xzqh() {
      var url = !this.url? '1' : this.url;
      if (url == "1") {
        var _url = "static/xzqhAll.json"; //全国
      } else if (url == "2") {
        var _url = "static/bjej.json"; //bjej
      } else if (url == "3") {
        var _url = "static/bjs3j.json"; //3级
      } else if (url == "4") {
        var _url = "static/bjs4j.json"; //4级
      }
      this.$http.get(_url).then(res => {
        let posiArr = this.randerPosition(res, this.value);
        this.xzqh(res, posiArr);
      });
    },
    randerPosition(all, tarid) {
      // 判断行政区划代码 是否再json文件中
      function xzqhFn(json, id) {
        var flag = false;
        xzqh(json, id);
        function xzqh(json, id) {
          json.forEach((item, index)=>{
            if (item.id == id) {
              flag = true;
              return
            }
            item.children && xzqh(item.children, id)
          })
        }
        return flag;
      }
      if (!xzqhFn(all, tarid)) {
        this.$emit("update:placeName", '请选择');
        this.$emit("value", '');
      }else{
        // 在json中  回显选中数据
        let _tarid = tarid || "110000000000";
        let _item1 = _tarid.substring(0, 3) + "000000000";
        let _item2 = _tarid.substring(0, 6) + "000000";
        let _item3 = _tarid.substring(0, 9) + "000";
        let _item4 = _tarid;
        this.dgArr(all, _item1);
        this.dgArr(all, _item2);
        this.dgArr(all, _item3);
        this.dgArr(all, _item4);
      }
      // 判断行政区划代码 是否再json文件中

      return this.positionArr;
    },
    dgArr(all, str) {
      all.forEach((item, index) => {
        if (item.id == str) {
          this.positionArr.push(index);
          return;
        } else if (item.children) {
          this.dgArr(item.children, str);
        }
      });
    },
    xzqh(jygzList, posi) {
      if (this.checkSelect) {
        this.dgFn(jygzList);
      }
      var _this = this;
      var _position = posi || [0, 1, 1, 1];
      const id = `#${this.prop}`;
      var pickerExtend = new PickerExtend({
        trigger: id,
        title: "选择地址",
        wheels: [{ data: jygzList }],
        keyMap: {
          id: "id",
          value: "name",
          childs: "children"
        },
        // flexibleHeight: "80",
        connector: "",
        position: _position,
        callback: function(indexArr, res) {
          let _data= [];
          if (this.checkSelect) {
            if(indexArr[indexArr.length-1] == 0){
              _data = res[res.length-2];
            }else{
              _data = res.pop();
            }
          }else{
            _data = res.pop();
          }
          _this.$emit('input',_data.id);
          _this.$emit("update:placeName", _data.name);
          _this.$nextTick(() => {
            _this.validItem();
          });
        }
      });
    },
    dgFn(xzqh){
      xzqh.forEach((item)=>{
        if(item.children && item.children.length>0){
          let Obj = {
            id:'',
            name:'确定',
            children:[]
          }
          item.children.unshift(Obj);
          this.dgFn(item.children)
        }
      })
      return xzqh
    }
  },
  mixins: [mixinValid]
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.weui-label {
  @include label;
}
.weui-cell__bd {
  padding: 26px 0;
  line-height: 34px;
  box-sizing: border-box;
  font-size: $font-size-base;
}
.txt {
  width: 90%;
  color: #4d4d4d !important;
  min-height: 32px;
}
</style>
